.container{
    background: url(../image/bg.gif) no-repeat center;
    background-size: 100% 278%;
    position: relative;
    width: 100%; 
    /*头部样式*/
    .row-top{
        width: 100%;
        height: auto;
        margin-bottom: 10px;
        .col-sm-3{
            width: 30%;
            float: left;
            .date-left{
                width: 65%;
                height: 6rem;
                padding-right: 1rem;
                float: left;
                .btn-and{
                    padding-right: 1rem;
                    width: 100%;
                    height: 3rem;
                    li{
                        line-height: 3rem;
                        width: 33%;
                        float: left;
                        button{
                            // border: 1px solid black;
                            // background:#0C384F !important;
                            // opacity: 0.7;
                            border-radius: 0px;
                            width: 90%;
                            margin: 0 5px;
                            color: white;
                            background: url(../image/bg-nav.png);
                            border:none;
                        }
                    }
                }
                .date-calendar{
                    width: 100%;
                    height:3rem;
                    .date-check{
                        width: 33%;
                        float: right;
                        height: 3rem;
                        .check-btn{
                            width: 80%;
                            height: 2rem;
                            margin: 0.5rem auto;
                            border: 1px solid #6FC0D6;
                            background: url(../image/bg-check.png);
                            .btn-default{
                                width: 80%;
                                height: 1.8rem;
                                margin: 5px auto;
                                .btn{
                                    width: 100%;
                                    height: 80%;
                                    background:#00D2FF !important;
                                    color: white;
                                    line-height: 0.6rem;
                                }
                            }
                        }
                    }
                }
            }
            .login{
                float: right;
                width: 25%;
                height: 6rem;
                .lg-lg{
                    width: 80%;
                    height: 2rem;
                    margin:1rem auto;
                    .img-login{
                        width: 15%;
                        float: left;
                    }
                    h2{
                        width: 80%;
                        float: left;
                        color: white;
                        text-align: center;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: 14px;
                        line-height: 1rem;
                    }
                }
            }
            .btn-right{
                width: 100%;
                height: 6rem;
                margin: 0 auto;
                .btn-dd{
                    width: 100%;
                    height: 2.5rem;
                    top: 1rem;
                    position: relative;
                    li{
                        float: left;
                        transform: skew(-25deg);  //平行四边形边框
                        width: 20%;
                        margin-left: 1rem;
                        button{
                            border: 1px solid #4196A8;
                            width: 100%;
                            height: 2.5rem;
                            background: #0C3E5C;
                            color: #97C9DA;
                            white-space: nowrap;   //文字强制不换行
                            text-overflow: ellipsis;  //多余部分省略号显示
                            overflow: hidden;  
                            font-weight: bold;
                            &:hover{background: #27B2D2;}
                        }
                    }
                }
            }
        }
        .col-sm-6{
            width: 40%;
            float: left;
            height: 6rem;
            background: url(../image/center-top.png) no-repeat center;
            background-size: 100% 100%;
            .center-top{
                width: 80%;
                height: 6rem;
                margin: 0 20px;
                .MIB-container{
                    width: 7%;
                    float: left;
                    margin-left: 20%;
                    margin-top: 1.5rem;
                    .MIB{
                        width: 100%;
                        height: 2rem;
                    }
                }
                .MIB-right{
                    width: 90%;
                    color: white;
                    font-size: 30px;
                    text-align: right;
                    line-height: 5rem;
                    white-space: nowrap;
                }
            }
        }
        /*头部响应*/
        @media (max-width:320px){
            .MIB-right{font-size: 12px !important;}
        }
        @media (min-width:320px){
            .MIB-right{font-size: 12px !important;}
            .btn-dd{li{margin-left: 6px !important;}}
        }
        @media (min-width:550px){
            .MIB-right{font-size: 12px !important;}
            .btn-dd{li{margin-left: 6px !important;}}
        }
        @media (min-width:720px){
            .MIB-right{font-size: 16px !important;}
            .btn-dd{li{margin-left: 8px !important;}}
        }
        @media (min-width:1300px){
            .MIB-right{font-size: 24px !important;}
        }
        @media (min-width:1536px){
            .MIB-right{font-size: 26px !important;}
            .btn-dd{li{margin-left: 10px !important;}}
        }
        @media (min-width:1736px){
            .MIB-right{font-size: 30px !important;}
        }

    }
    //*中间部分样式*//
    .row-center{
        width: 100%;
        height: auto;
        margin-bottom: 1rem;
        .col-sm-3{
            width: 30%;
            float: left;
            .data-base{
                width: 97%;
                height: 17.5rem;
                margin-bottom: 1rem;
                .data-title{
                    width: 100%;
                    height: 3.5rem;
                    .dt{
                        background: url(../image/data-title.png);
                        width: 100%;
                        height: 2.5rem;
                        background-size: 100% 100%;
                        color: white;
                    }
                    h2{
                        font-size: 15px;
                        margin-left: 1.5rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                .data-show{
                    width: 100%;
                    height: 14rem;
                    .dt-show{
                        width: 100%;
                        margin: 0;
                        height: 100%;
                        background:url(../image/base-data.png);
                        background-size: 100% 100%;
                        .left{
                            float: left;
                            width: 50%;
                            height: 100%;
                            .left-data{
                                width: 80%;
                                margin: 15px auto;
                                p{
                                    width: 100%;
                                    line-height: 3rem;
                                    color: #7AA5B5;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    font-size: 14px;
                                    font-family: 'Microsoft YaHei';
                                    span{
                                        color: #E5E7EA;
                                    }
                                }
                            }
                        }
                        .right{
                            float: left;
                            width: 50%;
                            height: 100%;
                            .right-data{
                                width: 80%;
                                margin: 15px auto;
                                p{
                                    width: 100%;
                                    line-height:3rem;
                                    color: #7AA5B5;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    font-size: 14px;
                                    font-family: 'Microsoft YaHei';
                                    span{
                                        color: #E5E7EA;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .top-10{
                width: 97%;
                height: 22.5rem;
                .data-title{
                    width: 100%;
                    height: 3.5rem;
                    .dt{
                        background: url(../image/data-title.png);
                        width: 100%;
                        height: 2.5rem;
                        background-size: 100% 100%;
                        color: white;
                    }
                    h2{
                        font-size: 15px;
                        margin-left: 1.5rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                #data-chart{
                    width: 100%;
                    margin: 0;
                    height: 19rem;
                    background:url(../image/top10.png);
                    background-size: 100% 100%;
                    // div{
                    //     width: 100% !important;
                    //     height: 100% !important;
                    //     left: 0 !important;
                    //     canvas{
                    //         width: 100% !important;
                    //         height: 100% !important;
                    //     }
                    // }
                }
            }
            .warning{
                width: 97%;
                height: 19.5rem;
                margin-bottom: 1rem;
                .data-title{
                    width: 100%;
                    height: 3.5rem;
                    .dt{
                        background: url(../image/data-title.png);
                        width: 100%;
                        height: 2.5rem;
                        background-size: 100% 100%;
                        color: white;
                        margin-left: 1rem;
                    }
                    h2{
                        font-size: 15px;
                        margin-left: 1.5rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                .data-show{
                    width: 100%;
                    height: 16rem;
                    .dt-show{
                        width: 94%;
                        margin: 0 auto;
                        height: 100%;
                        background:url(../image/warning.png);
                        background-size: 100% 100%;
                    }
                }
            }
            /***** 预警信息响应式*****/
            @media (max-width:320px){
                .warning{.txtScroll-top{.bd{html{font-size: 12px;}}}}
            }
            @media (min-width:320px){
                .warning{.txtScroll-top{.bd{html{font-size: 12px;}}}}
            }





            //雷达图数据展示
            .top-5{
                width: 97%;
                height: 20.5rem;
                .data-title{
                    width: 100%;
                    height: 3.5rem;
                    .dt{
                        background: url(../image/data-title.png);
                        width: 100%;
                        height: 2.5rem;
                        background-size: 100% 100%;
                        color: white;
                        margin-left: 1rem;
                    }
                    h2{
                        font-size: 15px;
                        margin-left: 1.5rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                #leida-data-chart{
                    width: 94%;
                    margin: 0 auto;
                    height: 17rem;
                    background:url(../image/top10.png);
                    background-size: 100% 100%;
                }
            }
            @media screen and (max-height:780px){
                #leida-data-chart {
                    width: 190px;
                    height: 135px;
                    margin-left: 36px;
                    margin-top: 10px;
                }
            }
        }
        .col-sm-6{
            width: 40%;
            float: left;
            background: url(../image/map.png);
            height: 41rem;
            background-size: 100% 100%;
            #main-data{
                height: 100%;
                width: 100%;;
            }
        }
    }
    //* 底部折线图样式*//
    .row-bottom{
        width: 100%;
        height: auto;
        margin-bottom: 1rem;
        .col-sm-12{
            width: 100%;
            .top-10{
                width: 98.5%;
                height: 23.5rem;
                .data-title{
                    width: 100%;
                    height: 3.5rem;
                    .dt{
                        background: url(../image/data-title.png);
                        width: 30%;
                        height: 2.5rem;
                        background-size: 100% 100%;
                        color: white;
                        margin-left: 0;
                    }
                    h2{
                        font-size: 15px;
                        margin-left: 1.5rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                #chart{
                    width: 100%;
                    margin: 0 auto;
                    height: 20rem;
                    background:url(../image/top10-2.png);
                    background-size: 100% 100%;
                }
            }
        }
    }
}


